/*
 * @Author: yangdingyuan yangdingyuan@bjjy.com
 * @Date: 2022-10-08 14:56:54
 * @LastEditors: yangdingyuan
 * @LastEditTime: 2022-10-08 15:41:19
 * @Description: 404组件
 */
import React, { Component } from 'react';
import withRouter from '../../hocs/withRouter';
import '../../assets/css/404.css';

class NotFound extends Component {
    render() {
        return (
            <div className="ErrorPage">
                <div className="ErrorPage-container">
                    <div className="ErrorPage-text">
                        <h1 className="ErrorPage-title">404</h1>
                        <p className="ErrorPage-subtitle">你似乎来到了没有知识存在的荒原</p>
                        <a
                            className="Button Button--primary Button--blue ErrorPage-primaryButton"
                            href="/"
                        >
                            去往首页
                        </a>
                        <div className="ErrorPage-otherButtonContainer">
                            或者
                            <button
                                className="Button Button--plain Button--blue ErrorPage-otherButton ErrorPage-goBackButton"
                                onClick={() => this.goBack(-1)}
                            >
                                返回上页
                                <svg
                                    className="Zi Zi--ArrowRight"
                                    fill="currentColor"
                                    viewBox="0 0 24 24"
                                    width="24px"
                                    height="24px"
                                >
                                    <path
                                        d="M9.218 16.78a.737.737 0 0 0 1.052 0l4.512-4.249a.758.758 0 0 0 0-1.063L10.27 7.22a.737.737 0 0 0-1.052 0 .759.759 0 0 0-.001 1.063L13 12l-3.782 3.716a.758.758 0 0 0 0 1.063z"
                                        fillRule="evenodd"
                                    ></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div className="ErrorPage-errorImageContainer">
                        <img
                            className="ErrorPage-errorImage"
                            src="/svgs/liukanshan_wire.svg"
                            alt="page error"
                        />
                    </div>
                </div>
            </div>
        );
    }

    goBack(to) {
        this.props.navigate(to);
    }
}

export default withRouter(NotFound);
